<template>
  <button @click="handleClick" class="text-button" :style="{ 'color': color, 'height': size + 'px', 'lineHeight': size + 'px', 'fontSize': size + 'px'}">
    <slot name="left"></slot>
    <span class="label" :class="{ 'left-sapce': $slots.left, 'right-sapce': $slots.right }">{{ label }}</span>
    <slot name="right"></slot>
  </button>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'TextButton',
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
    color: {
      type: String as PropType<string>,
      default: '#999999'
    },
    size: {
      type: String as PropType<string>,
      default: 14
    }
  },
  emits: ['click'],
  methods: {
    handleClick(event: MouseEvent): void {
      this.$emit('click', event);
    },
  },
});
</script>

<style lang="less" scoped>
.text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;

  .label {
    &.left-sapce {
      margin-left: 4px;
    }
    &.right-sapce {
      margin-right: 4px;
    }
  }
}
</style>